<template>
  <div>
    <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item :label="$t('TabVariable_EnvironmentVariables')" prop="isSynchronize">
        <el-button icon="iconfont icon-add" class="submit" size="mini" style="margin-left: 0" @click="addPort">{{$t('TabVariable_AddEnvVariable')}}</el-button>
      </el-form-item>
      <el-form-item label="" prop="port" v-for="(item, index) in portNum" :key="item">
        <el-input :placeholder="$t('TabVariable_name')" v-model="Envs[index].key" style="width: 40%;">
          <template slot="prepend">name</template>
        </el-input>
        <el-input :placeholder="$t('TabVariable_value')" v-model="Envs[index].value" style="width: 40%;margin-left: 20px;">
          <template slot="prepend">value</template>
        </el-input>
        <el-button @click="delPort(item, index)" title="删除" type="danger" icon="iconfont icon-lajitong" style="margin-left: 10px; padding: 10px;" size="mini"></el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      Envs: [],
      portNum: [],
      i: 0
    }
  },
  watch: {
    // 监听vuex中是isupload是否变化为true，true则上传本组件的数据。
    '$store.state.isUpload': function () {
      if (this.$store.state.isUpload) {
        this.$store.commit('changeCrateData', ['Envs', this.Envs])
      }
    }
  },
  methods: {
    // 添加开放端口的input框
    addPort () {
      this.portNum.push(this.i)
      this.Envs.push({ key: '', value: '' })
      this.i++
    },
    // 删除开放端口的input框
    delPort (item, index) {
      this.portNum = this.portNum.filter(data => {
        return data !== item
      })
      this.Envs.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.submit{
  background: #067FB5;
  color: #fff;
  margin-left: 30px;
}
</style>
